<template>
  <!-- 精品收费专区显示内容 -->
  <div class="article-details-page">
    <el-row id="article-details-page-header">
      <el-page-header @back="goBack" content="详情页面" />
    </el-row>
    <el-row id="article-details-page-main">
      <el-col :lg="8">
        <el-image :src="require('@/assets/activity3.png')" />
        <div id="article-details-page-main-operate">
          <span @click="changeCollection"
            ><i :class="getCollection()" id="collection" />收藏({{
              collectionNums
            }}人气)</span
          >
          &ensp;&ensp;&ensp;
          <span><i class="el-icon-share" />分享</span>
          <span id="article-details-page-main-warning"
            ><i class="el-icon-warning-outline" />举报</span
          >
        </div>
      </el-col>
      <el-col :lg="16">
        <el-row id="article-details-page-main-title">
          <span>热门文章</span>
        </el-row>
        <el-row>
          <span>作者</span>
          <span>张三</span>
        </el-row>
        <el-row>
          <el-col :lg="18">
            <span>价格</span>
            <span>￥10</span>
          </el-col>
          <el-col :lg="3">
            <el-row><span>66</span></el-row>
            <el-row><span>累计评论</span></el-row>
          </el-col>
          <el-col :lg="3">
            <el-row><span>133</span></el-row>
            <el-row><span>交易成功</span></el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-button plain>立即购买</el-button>
          <el-button plain @click="purchaseArticle" :disabled="disabled"
            ><i class="el-icon-shopping-cart-2" />加入购物车</el-button
          >
        </el-row>
        <el-row>
          <span>温馨提示：交易完成后不支持退货</span>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="文章详情" name="article">
          <div v-html="partContent" id="article-details-page-footer-novel" />
        </el-tab-pane>
        <el-tab-pane label="评论详情" name="comment">
          <div v-for="(comment, index) in comments" :key="index">
            <el-row id="article-details-page-footer-comment">
              <el-col :lg="2">
                <el-avatar
                  :size="64"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div>
                  <span> {{articleInfo[index].author}} </span>
                </div>
              </el-col>
              <el-col :lg="22">
                <el-row>
                  <span v-html="comment"> <!-- 文章详情内容 --> </span>
                </el-row>
                <el-row>
                  <span>
                    {{ new Date().getFullYear() }}年{{
                      new Date().getMonth() + 1
                    }}月{{ new Date().getDate() }}日&ensp;{{
                      new Date().getHours()
                    }}:{{ new Date().getMinutes() }}
                  </span>
                  <span>
                    <span @click="changelikenums(index)"
                      ><svg-icon
                        :icon-class="getLike(index)"
                        class="like" /></span
                    ><span>({{ likeInfo[index].num }})</span>
                  </span>
                </el-row>
              </el-col>
            </el-row>
            <el-divider />
          </div>
          <div>
            <el-pagination
              background
              prev-text="上一页"
              next-text="下一页"
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              :page-size.sync="pageSize"
              :total="pageTotal"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <!-- 底部内容 -->
      <el-divider />
      <el-row>
        <el-row>
          <el-col :span="4" :push="2">
            <b>网站相关</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>常用链接</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>联系我们</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>关注我们</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>内容许可</b>
          </el-col>
        </el-row>
        <el-row class="footer-item-content1">
          <el-col :span="4" :push="2">
            <div>关于我们</div>
            <div>服务条款</div>
            <div>帮助中心</div>
            <div>编辑器语法</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>百年智教育</div>
            <div>百年智论坛</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>联系我们</div>
            <div>加入我们</div>
            <div>建议反馈</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>微博</div>
            <div>twitter</div>
          </el-col>
          <el-col :span="4" :push="2">
            除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0
            国际许可协议 (CC BY-NC-ND 4.0) 进行许可
            <p>本站由 百年智教育 提供更新服务</p>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="footer-item-content2">
        Copyright © 2020 百年智集团 当前版本 0.0.1
      </el-row>
    </el-row>
  </div>
</template>
<script>
import cookie from "js-cookie";

export default {
  name: "Details",
  data() {
    return {
      // 选项卡标签（Tags）默认显示视图
      activeName: "article",
      currentPage: 1,
      pageSize: 3,

      disabled: false,

      pageTotal: null,
      // 模拟后端显示全部评论
      scomments: [],
      comments: [],

      likeInfo: [],

      isLiked: null,

      // articleInfo: {
      //   author: "",
      //   price: null,
      // },

      articleInfo: [],

      currentUserId: null,

      articleId: this.$route.query.id,
      // 文章详情内容
      partContent: "",
      //收藏图标
      iconStart: null,
      //收藏数
      collectionNums: "",

      collectionId: null,

      isCollect: null,
    };
  },

  methods: {
    getAvatar(index){
      //return this.articleInfo[index].
    },
    changeCollection() {
      this.$http
        .get(
          `http://localhost:9999/collection/collection/updateCollectionById/${this.articleId}/${this.currentUserId}`
        )
        .then((res) => {
          if (!res.data.code) {
            //console.log(res.data.data)
            this.collectionNums = res.data.data.collectionNum;
            this.isCollect = res.data.data.collection;
          }
        });
    },
    purchaseArticle(){
      console.log(this.currentUserId)
      this.$http
      .get(`http://localhost:9999/purchase/purchase/insertPurchase/${this.currentUserId}/${this.articleId}`)
      .then(res =>{
        if(!res.data.code){
          this.disabled=true
        }
      })
    },
    getCollection(isCollect) {
      //if (this.isCollect) return "el-icon-star-off";
      console.log(isCollect)
      return this.isCollect == false ? "el-icon-star-off" : "el-icon-star-on";
    },
    getLike(index) {
      return this.likeInfo[index].is_liked == 0 ? "like1" : "like2";
    },
    //修改点赞数
    changelikenums(index) {
      //console.log(this.likeInfo[index].id)
      this.$http
        .get(
          `http://localhost:9999/conlike/conlike/changeLikeNums/${this.currentUserId}/${this.likeInfo[index].id}`
        )
        .then((res) => {
          if (!res.data.code) {
            console.log(res.data.data);
            this.likeInfo[index].is_liked = res.data.data.isLiked;
            this.likeInfo[index].num = res.data.data.conlike.num;
          }
        });
    },
    // 初始化页面数据
    // initData() {
    //   this.comments = [];
    //   let start = (this.currentPage - 1) * this.pageSize;
    //   let end = this.currentPage * this.pageSize;
    //   console.log(start, end);
    //   for (let i = start; i < end; i++) {
    //     this.comments.push(this.scomments[i]);
    //   }
    // },
    // 点击返回触发事件
    goBack() {
      this.$router.go(-1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.comments = [];
      this.getCommentAndConlike();
    },

    getCommentAndConlike() {
      //console.log(this.currentUserId)
      this.$http
        .get(
          `http://localhost:9999/comment/comment/getCommentAndLike/${this.articleId}/${this.currentUserId}/${this.currentPage}/${this.pageSize}`
        )
        .then((res) => {
          if (!res.data.code) {
            (this.likeInfo = []),
              res.data.data.forEach((element) => {
                console.log(element);
                this.partContent = element.comment;
                // this.articleInfo.author = element.commentUsername;
                // this.articleInfo.price = 10;
                this.articleInfo.push({author:element.commentUsername,price:20})
                this.comments.push(element.comment);
                if (this.pageTotal == null)
                  this.pageTotal = element.commentNums;

                this.isCollect = element.collect;
                this.collectionNums = element.collectionNums;
                this.collectionId = element.collectionId;
               
                this.likeInfo.push({
                  id: element.conlikeId,
                  num: element.likeNums,
                  is_liked: element.isLiked,
                });
              });
            //console.log(this.articleInfo)
          }
        });
    },
  },
  watch: {
    // 监听当前页变化执行重新初始化数据
    // currentPage: function () {
    //   this.initData();
    // },
  },
  created() {
    var info = JSON.parse(cookie.get("userInfo"));
    this.currentUserId = info["id"];
    //console.log(this.currentUserId)
    //this.getCommentTotal();
  },

  mounted() {
    this.getCommentAndConlike();
  },
};
</script>
<style>
#collection {
  color: orange;
}
.like {
  font-size: 25px;
  cursor: pointer;
}
.footer-item-content1 {
  margin-top: 1%;
  font-size: 14px;
}
.footer-item-content2 {
  font-size: 14px;
  color: gray;
  text-align: center;
}
.article-details-page .el-pagination {
  float: right;
}
#article-details-page-footer-comment .el-col:nth-of-type(1) {
  text-align: center;
}
#article-details-page-footer-comment .el-col:nth-of-type(1) > div > span {
  font-size: 12px;
}
#article-details-page-footer-comment > .el-col:nth-child(2) > .el-row {
  margin-top: 16px;
}
#article-details-page-footer-comment
  > .el-col:nth-child(2)
  > .el-row:not(:nth-of-type(1))
  > span {
  font-size: 14px;
  color: gray;
}
#article-details-page-footer-comment
  > .el-col:nth-child(2)
  > .el-row:last-child
  > span:last-child
  > span:nth-of-type(1) {
  color: blue;
  cursor: pointer;
}
#article-details-page-footer-comment
  > .el-col:nth-child(2)
  > .el-row:last-child
  > span:last-child {
  float: right;
}
#article-details-page-footer-novel p:nth-of-type(1),
#article-details-page-footer-novel p:nth-of-type(2) {
  text-indent: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
#article-details-page-footer-comment p {
  text-indent: 0%;
}
#article-details-page-footer-novel p:not(:nth-of-type(1)):not(:nth-of-type(2)) {
  display: none;
}

.article-details-page {
  width: 80%;
  margin: auto auto;
}
#article-details-page-header {
  height: 48px;
  -webkit-box-shadow: 0px 3px 3px #c8c8c8;
  -moz-box-shadow: 0px 3px 3px #c8c8c8;
  box-shadow: 0px 3px 3px #c8c8c8;
}
#article-details-page-header > .el-page-header {
  line-height: 48px;
}
#article-details-page-main {
  margin-top: 2%;
  margin-bottom: 1%;
}
#article-details-page-main .el-image {
  width: 96%;
  height: 100%;
}
#article-details-page-main-operate {
  margin-top: 1%;
  width: 96%;
  color: #909399;
  font-size: 14px;
}
#article-details-page-main-operate > span {
  cursor: pointer;
}
#article-details-page-main-warning {
  float: right;
}
#article-details-page-main-title > span {
  font-size: 24px;
}
#article-details-page-main-title ~ .el-row {
  margin: 1% auto;
}
#article-details-page-main-title
  ~ .el-row:not(:nth-of-type(1)):not(:last-of-type):not(:nth-last-of-type(2))
  span:nth-of-type(1) {
  color: gray;
}
#article-details-page-main-title
  ~ .el-row:nth-last-of-type(2)
  .el-button:nth-of-type(1) {
  color: rgb(255, 72, 0);
  font-size: 20px;
  background: rgba(241, 197, 197, 0.692);
}
#article-details-page-main-title
  ~ .el-row:nth-last-of-type(2)
  .el-button:last-of-type {
  color: white;
  font-size: 20px;
  background: rgb(255, 72, 0);
}
#article-details-page-main-title
  ~ .el-row:not(:last-of-type)
  span:last-of-type {
  margin-left: 5%;
}
#article-details-page-main-title ~ .el-row:nth-of-type(3) {
  height: 64px;
  background: whitesmoke;
}
#article-details-page-main-title
  ~ .el-row:nth-of-type(3)
  .el-col:not(:nth-of-type(1))
  .el-row {
  text-align: center;
}
#article-details-page-main-title
  ~ .el-row:nth-of-type(3)
  .el-col:not(:nth-of-type(1))
  .el-row:nth-of-type(1)
  span {
  font-size: 24px;
  color: black;
}
#article-details-page-main-title
  ~ .el-row:nth-of-type(3)
  .el-col:nth-of-type(1)
  span:last-of-type {
  font-size: 28px;
  color: rgb(255, 72, 0);
}
#article-details-page-main-title ~ .el-row:last-of-type {
  color: crimson;
}
</style>